<template>
  <el-dialog
    title="公告详情"
    top="10vh"
    :visible.sync="showNoticeVisible"
    close-on-press-escape
    :before-close="close"
    center
    @opened="init"
  >
    <el-main v-loading="loading" style="padding: 0;height: 100%">
      <h2 style="text-align: center;">{{ title }}</h2>
      <div class="notice-content ql-editor" v-html="content" />
      <div class="pushMsg"><span>发布人：{{ author }}</span></div>
      <div class="pushMsg"><span>发布时间：{{ pushTime }}</span></div>
    </el-main>
  </el-dialog>
</template>

<script>
import { getNotice } from '@/api/home'
import { parseTime } from '@/utils/index'
export default {
  name: 'ShowNotice',
  props: {
    showNoticeVisible: Boolean,
    chooseId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      loading: false,
      title: '',
      content: '',
      author: '',
      pushTime: ''
    }
  },
  methods: {
    init() {
      this.loading = true
      getNotice(this.chooseId).then(res => {
        this.title = res.data.data.title
        this.content = res.data.data.content
        this.author = res.data.data.author
        this.pushTime = parseTime(res.data.data.pushTime)
        this.loading = false
      })
    },
    close() {
      this.$emit('closeShowNotice')
      this.title = ''
      this.content = ''
      this.author = ''
      this.pushTime = ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  height: 560px;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 500px;
  padding: 10px;
  border-top: 1px solid #ccc;
}
.notice-content{
  text-indent: 2em;
  height: 360px;
  padding: 0;
}
.pushMsg{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  span{
    display: inline-block;
    width: 220px;
  }
}
</style>
